<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
    <!--<script src="/static/axios/axios.min.js"></script>-->
    <script src="/static/JQuery/jquery-3.3.1.min.js"></script>
</head>
<body class="layui-layout-body" style="padding: 10px">

<form class="layui-form" action="" lay-filter="goodsEdit">
    <input type="hidden" id="goodsid" name="goodsid" />
    <input type="hidden" id="goodsstar" name="goodsstar" />
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsname" class="layui-input">
            </div>
            <label class="layui-form-label">价格</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsprice" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">单位</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsunit" class="layui-input">
            </div>
            <label class="layui-form-label">商品剩余数量</label>
            <div class="layui-input-inline">
                <input type="text" name="goodnum" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsdesc" class="layui-input">
            </div>
            <label class="layui-form-label">创建时间</label>
            <div class="layui-input-inline">
                <input type="text" name="goodscreatetime" id="goodscreatetime" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">发布用户</label>
            <div class="layui-input-inline">
                <select name="fksellerid" id="fksellerid" lay-search="" >
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">商品类别</label>
            <div class="layui-input-inline">
                <select name="fktypeid" id="fktypeid" lay-search="" >
                    <option value=""></option>
                </select>
            </div>
        </div>
    </div>





    <div class="layui-form-item">
        <div class="layui-inline">
            <button type="button" class="layui-btn" id="upload1">上传图片1</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="img1" height="100px">
                <input type="hidden" name="goodsimg1" id="goodsimg1" >
            </div>
        </div>

        <div class="layui-inline" style="margin-left: 50px">
            <button type="button" class="layui-btn" id="upload2">上传图片2</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="img2" height="100px" >
                <input type="hidden" name="goodsimg2" id="goodsimg2" >
            </div>
        </div>

        <div class="layui-inline" style="margin-left: 50px">
            <button type="button" class="layui-btn" id="upload3">上传图片3</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="img3" height="100px">
                <input type="hidden" name="goodsimg3" id="goodsimg3" >
            </div>
        </div>
    </div>





    <div class="layui-col-md-offset5">
        <div class="layui-input-block">
            <button class="layui-btn" type="button" lay-submit lay-filter="goodsSubmit">立即提交</button>
        </div>
    </div>
</form>

</body>

</html>

<script>
    //alert(localStorage.goodsid);
    layui.use(['form', 'layedit', 'laydate', 'layer', 'upload'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,upload = layui.upload
            ,laydate = layui.laydate;
        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

        //日期时间选择器
        laydate.render({
            elem: '#goodscreatetime'
            ,type: 'datetime'
        });

        //普通图片上传
        var uploadInst1 = upload.render({
            elem: '#upload1'
            ,url: '/restful/upload'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(fileIndex, file, result){
                    $('#img1').attr('src', result); //图片链接（base64）
                    parent.layer.iframeAuto(index);
                });
            }
            ,done: function(res){
                if(res){
                    $('#goodsimg1').attr("value", res.data.path);
                    layer.msg('上传成功');
                }else{
                    layer.msg('上传失败');
                }
            }
            ,error: function(){
                layer.msg("上传失败");
            }
        });

        var uploadInst2 = upload.render({
            elem: '#upload2'
            ,url: '/restful/upload'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(fileIndex, file, result){
                    $('#img2').attr('src', result); //图片链接（base64）
                    parent.layer.iframeAuto(index);
                });
            }
            ,done: function(res){
                if(res){
                    $('#goodsimg2').attr("value", res.data.path);
                    layer.msg('上传成功');
                }else{
                    layer.msg('上传失败');
                }
            }
            ,error: function(){
                layer.msg("上传失败");
            }
        });

        var uploadInst3 = upload.render({
            elem: '#upload3'
            ,url: '/restful/upload'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(fileIndex, file, result){
                    $('#img3').attr('src', result); //图片链接（base64）
                    parent.layer.iframeAuto(index);
                });
            }
            ,done: function(res){
                if(res){
                    $('#goodsimg3').attr("value", res.data.path);
                    layer.msg('上传成功');
                }else{
                    layer.msg('上传失败');
                }
            }
            ,error: function(){
                layer.msg("上传失败");
            }
        });

        //加载类别信息下拉列表
        $.ajax({
            url:"/restful/find",
            type:"POST",
            data:JSON.stringify({"firstTable":"types"}),
            contentType: "application/json;charset=utf-8",
            dataType : "json",
            async:false,
            success : function(result) {
                var data = result.data;
                var count = result.count;
                for(var i = 0 ; i < count ; i ++){
                    $('#fktypeid').append("<option value='" + data[i].typeid + "'>" + data[i].typename + "</option>");
                }
                form.render("select");
            },
            error:function(msg){
                layer.alert(msg);
                $('#fktypeid').append("<option value=''>加载错误</option>");
            }
        });

        //加载用户信息下拉列表
        $.ajax({
            url:"/restful/find",
            type:"POST",
            data:JSON.stringify({"firstTable":"users"}),
            contentType: "application/json;charset=utf-8",
            dataType : "json",
            async:false,
            success : function(result) {
                var data = result.data;
                var count = result.count;
                for(var i = 0 ; i < count ; i ++){
                    $('#fksellerid').append("<option value='" + data[i].userid + "'>" + data[i].username + "</option>");
                }
                form.render("select");
            },
            error:function(msg){
                layer.alert(msg);
                $('#fksellerid').append("<option value=''>加载错误</option>");
            }
        });
        
        
        if(localStorage.goodsid){
            $.ajax({
                url:"/restful/find",
                type:"POST",
                data:JSON.stringify({
                    firstTable:"goods",
                    relations:{
                        "goods.fktypeid":"types.typeid",
                        "goods.fksellerid":"users.userid"
                    },
                    wheres:[{field:"goods.goodsid",value:localStorage.goodsid}]
                }),
                contentType: "application/json;charset=utf-8",
                dataType : "json",
                async:false,
                success : function(result) {
                    var data = result.data[0];
                    //表单input初始赋值
                    // alert(JSON.stringify(data));
                    form.val('goodsEdit', data);
                    $('#img1').attr("src", "/upload/" + data.goodsimg1);
                    $('#img2').attr("src", "/upload/" + data.goodsimg2);
                    $('#img3').attr("src", "/upload/" + data.goodsimg3);
                },
                error:function(msg){
                    layer.alert(msg);
                    $('#fktypeid').append("<option value=''>加载错误</option>");
                }
            });
        }

        form.on('submit(goodsSubmit)', function(data){
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            // alert(JSON.stringify([data.field]));
            $.ajax({
                url:"/restful/save/goods",
                type:"POST",
                data:JSON.stringify([data.field]),
                contentType: "application/json;charset=utf-8",
                dataType : "json",
                async: false,
                success : function(result) {
                    parent.layer.msg("操作成功", {icon : 1});
                },
                error:function(result){
                    parent.layer.msg("操作失败", {icon : 5});
                }
            });
            parent.layer.close(index);
            return false;
        });


    });


</script>
